<template>
  <div>
    <!-- 子路由header -->
    <header class="flex-center-between">
      <div class="l_title">
        调薪提醒
        <a-switch class="switch" checkedChildren="开" unCheckedChildren="关" defaultChecked @change="onChangeSwitch" />

        <a-button @click="addMessage" class="btn_bag" icon="plus"> 添加提醒 </a-button>
      </div>
      <a-button>保存并返回</a-button>
    </header>
    <!-- 子路由插座 -->
    <a-layout-content class="a_layout_content">
      <a-row type="flex" align="middle" class="a_title">
        <a-col :span="6">调薪邮件提醒</a-col>
        <a-col :span="8">
          <a-row class="sub_tit pb12">提醒时间</a-row>
          <a-tag color="#6A66F6">orange</a-tag>
          <a-tag color="#6A66F6">orange</a-tag>
        </a-col>
        <a-col :span="8">
          <a-row class="sub_tit pb12">通知人</a-row>
          <a-tag color="#6A66F6">orange</a-tag>
        </a-col>
        <a-col :span="2" class="ta-right"> <a-icon type="delete" /> </a-col>
      </a-row>
    </a-layout-content>
    <!-- // 弹窗 -->
    <add-message :msgOptions="msgOptions"> </add-message>
  </div>
</template>

<script>
export default {
  name: "MessageSet",
  components: { addMessage: () => import("@/views/wages/common/add_message") },

  data() {
    return {
      msgOptions: {}
    };
  },

  methods: {
    // 调薪提醒
    onChangeSwitch(checked) {},
    // 添加调薪提醒
    addMessage() {
      this.msgOptions = {
        show: true,
        data: []
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.switch {
  margin-right: 20px;
  margin-left: 16px;
}
.a_layout_content {
  background: #fff;
  min-height: calc(100vh - 190px);
  .a_title {
    height: 80px;
  }
}
</style>
